<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background-image: radial-gradient(rgb(241, 238, 238), black);
		}
		.kapian {
			position: relative;
			width: 300px;
			height: 400px;
			border-radius: 3px;
			background-color: #fff;
			box-shadow: 2px 3px 3px rgb(139, 138, 138);
			overflow: hidden;
			cursor: pointer;
			transition: all 0.3s;
		}
		.kapian:hover {
			box-shadow: 2px 3px 10px rgb(36, 35, 35);
		}
		.tu {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 300px;
			overflow: hidden;
		}
		.tu img {
			width: 100%;
			height: 100%;
			transition: all 0.5s;
		}
		.kapian:hover .tu img {
			transform: scale(1.2);
			filter: blur(1px);
		}
		.wenben {
			position: absolute;
			bottom: -200px;
			width: 100%;
			height: 300px;
			
			background-color: rgb(247, 242, 242);
			transition: 0.5s;
		}
		.kapian:hover .wenben {
			bottom: 0px;
		}
		.wenben h2 {
			color: rgb(21, 74, 172);
			line-height: 60px;
			text-align: center;
		}
		.wenben p {
			padding: 0 30px;
			font-family: 'fangsong';
			font-size: 16px;
			font-weight: bold;
			line-height: 20px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="kapian">
		<div class="tu">
			<img src="封面.jpg">
		</div>
		<div class="wenben">
			<h2>The aurora borealis</h2>
			<p style="padding-bottom: 20px;">natural</p>
			<p>
				Aurora Borealis is a colorful luminous phenomenon that appears over the high magnetic latitude region of the planet's North Pole. I love the aurora borealis. It's so beautiful.
			</p>
		</div>
	</div>
</body>
</html>
